<template>
    <div id="home">
        <Swiper
            :list="lunboList"
            auto
            loop
        >
        </Swiper>
        
        <div id="homesearch" >
            <router-link to="/"><img  style="width:25%" src="../../static/image/index.png" ></router-link>
            <input type="text" placeholder="请输入商品"  @input="shuru" v-model="val">
            <router-link :to="{path:'/Category/goodsList',query:{skind:val}}"  style="color:white"><label class="fa fa-search" ></label></router-link>

            <span class="fa fa-angle-down" >全国</span>
        </div>
        <div id="address">

        </div>
         <div id="more" :class="{'disappear':val==''}">
            <router-link :to="{path:'/Category/goodsList',query:{skind:a}}"  v-for="a in arr" class="font">
            <span>{{a}}</span>
            </router-link>
        </div>

        <div id="four">
            <div class="fourlist" v-for="f in fourList">
                <router-link to="">
                    <img :src="f.img" alt="">
                    <p>{{f.font}}</p>
                </router-link>
            </div>
        </div>
        
        <div id="toutiao">
            <router-link to="">
                <img src="../../static/image/toutiao.png">
            </router-link>
                <span id="marqueen"> 
                <marquee direction=up  scrolldelay="5" scrollamount="1" loop="1"  hspace="20" vspace="15"  height="13px" >                        
                            <p><span style="color:red;font-weight:bolder;font-size:12px">惠</span><span style="font-weight:bold;font-size:11px">11.11全面放价，111台55寸电视免费送！</span></p>  
                            <p><span style="color:red;font-weight:bolder;font-size:12px">热</span><span style="font-weight:bold;font-size:11px">11.11半价开团，底价好货限时开抢！</span></p>  
                </marquee> 
           </span>  
        </div>
        
        <div id="three">
            <div class="threelist" v-for="t in threelist">
                <router-link to="">
                    <img :src="t.img">
                </router-link>
            </div>
        </div>
      <div class="line">
            <p></p>
            <p>人气爆品</p>
            <p></p>
        </div>
          
        <div class="center" v-for="(r,i) in renqidata" v-if="i<1">
            <router-link :to="{path:'/Category/goodsList/goodsone',query:{_id:'5a01ba4231e0cc1b6c309537'}}"><p class="p1"><img :src="renqidata[0].img"><img :src="renqidata[1].img"></p>
            <p class="p2"><img :src="renqidata[2].img"><img :src="renqidata[3].img"><img :src="renqidata[4].img"></p></router-link>
        </div>
        <div class="line">
            <p></p>
            <p>家具城</p>
            <p></p>
        </div>
        <div class="center" v-for="(r,i) in jiajuchengdata" v-if="i<1">
            <router-link :to="{path:'/Category/goodsList/goodsone',query:{_id:'5a01bb2c31e0cc1b6c30953d'}}"><p class="p1"><img :src="jiajuchengdata[0].img"><img :src="jiajuchengdata[1].img"></p>
            <p class="p2"><img :src="jiajuchengdata[2].img"><img :src="jiajuchengdata[3].img"><img :src="jiajuchengdata[4].img"></p>
            </router-link>
        </div>
        <div class="line">
            <p></p>
            <p>建材城</p>
            <p></p>
        </div>
        <div class="center" v-for="(r,i) in jianchaidata" v-if="i<1">
        <router-link :to="{path:'/Category/goodsList/goodsone',query:{_id:'5a01bbc831e0cc1b6c30953f'}}">
            <p class="p1"><img :src="jianchaidata[0].img"><img :src="jianchaidata[1].img"></p>
            <p class="p2"><img :src="jianchaidata[2].img"><img :src="jianchaidata[3].img"><img :src="jianchaidata[4].img"></p> </router-link>
        </div>
        <div class="line">
            <p></p>
            <p>猜你喜欢</p>
            <p></p>
        </div>
          <Backtoup></Backtoup>
        <div class="love">
            <div class="smalllove" v-for="(g,i) in itemskindAll" v-if="i<8">
                <router-link 
                        :to="{path:'/Category/goodsList/goodsone',query:{_id:g._id}}" 
                    >
                            <img :src="'/images/goods/'+g.img[0]" class="goods-img">
                        <div>
                                <span class="goods-desc" style="font-size:15px">【{{g.brandname}}】</span>
                                <span style="font-size:16px;color:#ee0000" class="fa fa-rmb">{{g.newprice}}</span>
                        </div>
                    </router-link>
            </div>
        </div>
       
    </div>
</template>

<script>
import {mapState,mapActions} from 'vuex';
import {Swiper} from 'vux';
import Backtoup from "../components/Backtoup.vue"
export default {
    data(){
        return{
           scroll:'',
           val:"",
           arr:[],
           loveList:[]
        }
    },
    components:{
        Swiper,
        Backtoup
    },
    computed:{
        ...mapState({
            lunboList:state=>state.home.lunbodata,
            fourList:state=>state.home.fourdata,
            threelist:state=>state.home.threedata,
            renqidata:state=>state.home.renqidata,
            jiajuchengdata:state=>state.home.jiajuchengdata,
            jianchaidata:state=>state.home.jianchaidata,
        }) ,
        ...mapState([
            "itemskindAll",
            "isrequest"
        ])
    },
    mounted:function(){
        this.$store.dispatch("requestlunbo");
        this.$store.dispatch("requestfour");
        this.$store.dispatch("requestthree");
        this.$store.dispatch("requestrenqi");
        this.$store.dispatch("requestjiajucheng");
        this.$store.dispatch("requestjianchai");

        window.addEventListener('scroll', this.homeSearchScroll);
       var params = {
                smallkind:"沙发",
                home:1
            };
            this.$store.commit("setItemskindAll","");
            setTimeout(()=> {
                this.$store.dispatch("requestItemskindAll",params);
            }, 1000);
    },
    methods:{
        homeSearchScroll(){
            this.scroll = document.documentElement.scrollTop;
            if(this.scroll>100){
                $("#homesearch").css("backgroundColor","red");
            }else{
                $("#homesearch").css("backgroundColor","inherit");
            }
        },
        shuru:function(){
             this.arr = [];
            this.http.post("/api/cates/key",{smallkind:this.val})
            .then(res=>{
                for(var i = 0;i<res.data.msg.length;i++){
                    if(this.arr.indexOf(res.data.msg[i].small)==-1){
                        this.arr.push(res.data.msg[i].small);
                    }
                }
            });
        },
    },
}
</script>

<style scoped>
.love{
    width:100%;
    height: 100%;
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;

}
.smalllove{
    width:50%;
    height: 160px;
    padding: 3px;
    margin-bottom: 10px;
}

.smalllove img{
    width:100%;

}

#marqueen{
    position:absolute;
    top:280px;;
    left:100px;
    z-index:100;
    width:230px;
}
#home{
    margin-bottom: 60px;
}
#homesearch{
    width:100%;
    height:35px;
    line-height:35px;
    position:fixed;
    top:0px;
    padding-left:1em;
    color:white;
    font-size:18px;

}
#homesearch img{
    margin-top:4px;
}
#homesearch input{
    width:40%;
    height:25px;
    padding-left:5px;
    position:relative;
    top:-3px;
}




  #more{
    color:black;
    position:absolute;
    background-color:white;
    z-index:80;
    top:32px;
    left:6px;
    width:96%;
    height:100px;
    border-radius:4px;

  }
  #more  span{
    display:inline-block;
    margin-top:20px;
    margin-left:20px;
    width:100px;
    height:30px;
    line-height:30px;
    border-radius:10px;
    background-color:#eeeeee;
    text-align:center;
    flex-wrap: wrap;
    font-size: 12px;

  }
  .font{
    color:#999999;
  }
  .disappear{
    display:none;
  }

#four{
    display:flex;
    margin-top:20px;
    text-align:center;
    width:100%;
}



#four .fourlist{
    width:25%;
}
#four .fourlist img{
    width:50%;
}
#four .fourlist p{
    font-size:12px;
}

#toutiao{
    width:100%;
    height:30px;
    border-top:solid 1px #dddddd;
    border-bottom:solid 1px #dddddd;
    margin:20px 0;
}

#toutiao img{
    height:30px;
}

#three{
    display:flex;
    margin-top:20px;
    text-align:center;
    width:100%;
}
#three .threelist{
    width:33.33%;
}
#three .threelist img{
    width:99%;
}

.line{
    width:100%;
    height:20px;
    padding:20px 0;
    display:flex;
    justify-Content:space-around;
    text-align:center;
}
.line p:nth-of-type(1){
    width:30%;
    border-top:1px black solid;
}
.line p:nth-of-type(2){
    width:20%;
    position:relative;
    top:-8px;
}
.line p:nth-of-type(3){
    width:30%;
    border-top:1px black solid;
}

.center {
    width:100%;
    margin-top: 6px;

}
.center .p1 img{
    width:50%;
}
.center .p1 img:nth-of-type(1){
    border-right: 1px #eeeeee solid;
}
.center .p2 img{
    width:33.33%;
}

.center .p2 img:nth-of-type(1){
    border-right: 1px #eeeeee solid;
}
.center .p2 img:nth-of-type(2){
    border-right: 1px #eeeeee solid;
}



</style>